<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>微博网页版</title>
    <link rel="stylesheet" href="./css/chaohua（kantie）.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./fonts/iconfont.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
</head>

<body>
    <!-- 上导航 -->
    <header>
        <ul class="top1">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-a-chuangjian2"></use>
                </svg>
            </li>
            <li>
                <a href="./chaohua（kantie）.html"><p>看帖</p></a>
            </li>
            <li>
                <a href="./chaohua（guangchang）.html"><p>广场</p></a>

            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tianjia"></use>
                </svg>
            </li>
        </ul>
    </header>
    <!-- 搜索框 -->
    <div id="top2">
        <div class="topOut">
            <div class="search">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input type="text" name="search" id="search" placeholder="大家正在搜：">
            </div>
        </div>
    </div>
    <!-- swiper超链接 -->
<div class="swiper s4">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="./images/chaohua(kantie)/1.PNG"></div>
    <div class="swiper-slide"><img src="./images/chaohua(kantie)/2.PNG"></div>
    <div class="swiper-slide"><img src="./images/chaohua(kantie)/3.PNG"></div>
    <div class="swiper-slide"><img src="./images/chaohua(kantie)/4.PNG"></div>
    <div class="swiper-slide"><img src="./images/chaohua(kantie)/5.PNG"></div>
    <div class="swiper-slide"><img src="./images/chaohua(kantie)/6.PNG"></div>
    <div class="swiper-slide"><img src="./images/chaohua(kantie)/7.PNG"></div>
  </div>
</div>
<!-- 必刷超话 -->
<div class="sanzhong">
    <div class="bishuachaohua">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-huobao"></use>
          </svg>
          <p>必刷超话</p>
    </div>
    <div class="fujin">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fujinjiudian"></use>
          </svg>
          <p>附近</p>
    </div>
    <div class="meihaoshenghuo">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-aixin"></use>
          </svg>
          <p>美好生活</p>
    </div>
</div>
<!-- 微博正文（左图右文） -->
<div class="neirong">
    <div class="tuxiang">
         <a href="#">
            <img src="./images/chaohua(kantie)/8.jpg">
        </a>
    <div class="txt">
        <h3>SP我的最爱！</h3>
        <span class="fujia1">12-10</span>
        <span class="fujia2">@喵姐</span>
        <div class="guanzhu2">
              <span>+加关注</span>
        </div>
    </div> 
    </div>
    <div class="tuxiang2">
        <p>#泡泡马特#skullpanda</p>
        <img src="./images/chaohua(kantie)/9.jpg">
    </div>
    <div class="kuaijiejian">
        <div class="tuxiang3">
            <img src="./images/chaohua(kantie)/头像.jpg" alt="">
        </div>
        <div class="pinglunsearch">
            <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
        </div>
    </div>
    <div class="santubiao">
        <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhuanfa"></use>
                </svg>
            <span>6</span>
        </div>
        <div class="sanyang">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liuyan"></use>
            </svg>
             <span>2</span>
        </div>
        <div class="sanyang">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-good"></use>
            </svg>
            <span>105</span>
        </div>
    </div>
</div>
<!-- 超话分类 -->
<div class="xihuanderen">
    <div class="wenzi">
        <p>精选推荐可能感兴趣的人</p>
    </div>
    <div class="swiper s5">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/chaohua(kantie)/10.jpg"></div>
          <div class="swiper-slide"><img src="./images/chaohua(kantie)/11.jpg"></div>
          <div class="swiper-slide"><img src="./images/chaohua(kantie)/12.jpg"></div>
          <div class="swiper-slide"><img src="./images/chaohua(kantie)/13.jpg"></div>
          <div class="swiper-slide"><img src="./images/chaohua(kantie)/14.jpg"></div>
          <div class="swiper-slide"><img src="./images/chaohua(kantie)/15.jpg"></div>
        </div>
      </div>
    <div>
        <span>7月18日13:53分</span>
        <h1>
            7月18日14:05分
        </h1>

    </div>
</div>
    <nav id="snav"></nav>
    <main></main>
    <aside></aside>
    <section id="ad"></section>
    <nav id="bnav"></nav>
    <!-- 下导航 -->
    <footer>
       <nav class="bnav">
        <div class="btnav">
            <div class="bonav">
                <a href="./shouye（guanzhu）.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">首页</a>
                </p>
            </div>
            <div class="bonav">
                <a href="./chaohua（kantie）.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaohua"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">超话</a>
                </p>
            </div>
            <div class="bonav">
                <a href="./faxian.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Magnifier"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">发现</a>
                </p>
            </div>
            <div class="bonav">
                <a href="./xiaoxi.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinfeng"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">消息</a>
                </p>
            </div>
            <div class="bonav">
                <a href="./wo.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wo"></use>
                    </svg>
                </a>
                <p>
                    <a href="#">我的</a>
                </p>
            </div>
        </div> 
    </nav>
    </footer>
    <!-- 超链接script -->
    <script>
        var swiper4 = new Swiper(".s4", {
          slidesPerView: 2,
          spaceBetween: 5,
        });
    </script>
    <!-- 超话分类script -->
    <script>
        var swiper5 = new Swiper(".s5", {
          slidesPerView: 2,
          spaceBetween: 5,
        });
    </script>
</body>
</html>
